<template lang='jade'>
  .results
    .results-container
      side-bar
      .results-content
        .results-content-datepicker
          select.datepicker
            option(value="" disabled selected) 选择日期
            option(value="1") 2017-2018
            option(value="2") 2017-2019
            option(value="3") 2017-2018
        .results-content-agenda
          agenda
        .results-content-table
          data-table(:colums='colums', :table-data='tableData')
        data-statistics
        
          
</template>

<script>
import sideBar from 'components/sideBar.vue'
import dataTable from 'components/dataTable.vue'
import dataStatistics from 'components/dataStatistics.vue'
import agenda from 'components/agenda.vue'
import constants from 'constants'

export default {
  name: 'results',
  components: {
    sideBar,
    dataTable,
    dataStatistics,
    agenda
  },
  data(){
    return {
      items:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],
      roundSelected: 1,
      //colums这里存在callback，建议直接在该层写colums，现为了统一方便，放在了constants文件里
      colums: constants.MATCH_TABLE_COLUMNS,
      tableData: constants.MATCH_TABLE_DATA,
    }
  },
  created(){
    
  },
  mounted(){
    let self = this
    
  },
  methods: {
    
  }
  
}
</script>

<style lang="less" scoped>
  .results{
    position: relative;
    width: 100%;
    &-container{
      width: 850pt;
      position: relative;
      left: 0;
      right: 0;
      margin: auto;
      overflow: hidden;
      background: #31404B;
    }
    &-content{
      width: 618pt;
      float: right;
      background: #292C31;
      padding-left: 30pt;
      &-round{
        position: relative;
        height: 60pt;
        background: #1E2024;
        margin-top: 31pt;
        &-name{
          position: relative;
          width: 83.5pt;
          height: 60pt;
          float: left;
          text-align: center;
          span{
            position: absolute;
            height: 39pt;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #fff;  
            font-size: 14pt;
          }
        }
        &-list{
          &-column{
            display:-moz-box;
            display:box;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
          }
          .fist {
            border-bottom: 1px solid #9A9DA2;
          }
          &-item{
            color: #fff;
            box-flex: 1;
            box-align: center;
            -webkit-box-flex: 1; 
            -webkit-box-align: center; 
            text-align: center;
            height: 30pt;
            line-height: 30pt;
            border-left: 1px solid #9A9DA2;
            position: relative;
            span {
              position: absolute;
              color: #fff;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              &:hover{
                background: #FFDC00;
              }
            }
            span.active{
              background: #FFDC00;
              color: #000;
              font-weight: bold;
            }
          }
        }
      }
      &-table{
        margin-top: 32.5pt;
      }




      &-datepicker{
        position: relative;
        width: 100%;
        height: 52pt;
        select.datepicker{
          width: 82pt;
          height: 25pt;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
  }
    
</style>
